<template>
	<view class="shopDetails">
		<view class="shopDetails_content">
			<view class="banner" v-if="shopDetails.masterImg">
				<image class="bannerImage" :src="ossUrl + (shopDetails.masterImg||'')" mode="aspectFill"></image>
			</view>
			<view class="banner" v-else>
				<view class="bannerImage" style="background-color: #fff;"></view>
			</view>
			<view class="titleText">
				<text>{{shopDetails.merchantName}}</text>
				<tui-form-button @click="editShopDetails" margin="0 0 0 20rpx" width="120rpx" size="24" height="42rpx" plain
					background="#63d6d3" color="#63d6d3" radius="100rpx">
					<image class="icon" src="/static/tutor/order/icon_edit@2x.png"></image>编辑
				</tui-form-button>
			</view>
			<view class="timeText">
				<view class="lt"><text>营业时间：{{shopDetails.startTime}}—{{shopDetails.endTime}}</text></view>
				<view class="rt"><text>{{className}}</text></view>
			</view>
			<view class="addressText">
				商家地址：<text class="ct">{{shopDetails.address}}</text>
			</view>
			<view class="noticeText">

			</view>
			<view class="tabList">
				<view class="tabList_tab">
					<tutor-tab :list="['商家图片','教练列表']" @clickSwtichTab="clickSwtichTab" :atciveIndex="atciveIndex"></tutor-tab>
				</view>
				<view class="shopDetailsContent">
					<view class="tabList_banner" v-show="!atciveIndex">
						<tutor-videoImg-swiper :ossUrl="ossUrl" :imgUrls="imgUrls"></tutor-videoImg-swiper>
					</view>
					<z-paging ref="paging" :fixed="false" v-model="listData" @query="queryList">
						<view class="shopImg" v-if="!atciveIndex">
							<view class="appraiseTitle">
								<text class="appraiseText">评价</text>
								<view class="appraiseNum">(<text class="num">{{appraiseData.total}}</text>)</view>
							</view>
							<view class="appraiseItems">
								<tutor-appraiseItem :listData="listData"></tutor-appraiseItem>
							</view>
						</view>
						<view class="tutorList" v-else>
							<tutor-tutorStatusCard @TotutorDetails="TotutorDetails" :isHideButton="0" :ossUrl="ossUrl"
								:tutorList="listData"></tutor-tutorStatusCard>
						</view>
					</z-paging>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserShopDetails
	} from "@/http/api/shop/shop.js"
	import {
		getTutorListByMerchant
	} from "@/http/api/tutor/tutor.js"
	import {
		getAppraiseList,
		putAppraise
	} from "@/http/api/appraise/appraise.js"
	export default {
		data() {
			return {
				shopDetails: {},
				ossUrl: getApp().globalData.ossurl, //图片前缀
				atciveIndex: 0, //切换商家图片和教练列表 
				appraiseData: {}, //评价列表返回数据
				listData: []
			}
		},
		props: {
			beUserId: {
				type: String,
				default: ''
			}
		},
		destroyed() {
			uni.$off('refresh')
		},
		mounted() {

			uni.$on('refresh', (e) => {
				if (e) {
					this.getDetails()
				}
			})
		},
		computed: {
			imgUrls() {
				return this.shopDetails.detailImgs || []
			},
			// videoline(){
			// 	if(this.shopDetails.detailImgs&&this.shopDetails.detailImgs.length || false){  
			// 		if(this.isImage(this.shopDetails.detailImgs[this.shopDetails.detailImgs.length - 1])){
			// 			 return ''
			// 		}else{
			// 			 return  this.shopDetails.detailImgs[this.shopDetails.detailImgs.length - 1]
			// 		} 
			// 	}
			// },
			className() {
				return this.$store.getters.categoryName(this.shopDetails.categoryId);
			}
		},
		methods: {
			clickSwtichTab(data) {
				this.atciveIndex = data.index
				this.$refs.paging.reload()
			},
			isImage(filename) {
				const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg'];
				const fileExtension = filename.slice(filename.lastIndexOf('.'));
				return imageExtensions.includes(fileExtension.toLowerCase());
			},
			getDetails() {
				getUserShopDetails().then(res => {
					if (res.code === 200) {
						this.shopDetails = res.data
						this.$store.commit('setUserShopDetails', res.data)
					}
				})
			},
			//编辑当前商家信息
			editShopDetails() {
				let data = JSON.stringify(this.shopDetails)
				uni.navigateTo({
					url: '/pages/shopControl/modules/merchantInfoEdit/merchantInfoEdit?shopDetails=' + data
				})
			},
			//教练详情
			TotutorDetails(item) {
				uni.navigateTo({
					url: '/pages/tutorControl/modules/tutorList/tutorList?id=' + item.id
				})
			},
			//加载评价教练列表
			async queryList(pageNo, pageSize) {
				let id = this.shopDetails && this.shopDetails.id || false
				if (!id) {
					await getUserShopDetails().then(res => {
						if (res.code === 200) {
							this.shopDetails = res.data
							this.$store.commit('setUserShopDetails', res.data)
						}
					})
				}
				if (!this.atciveIndex) {
					getAppraiseList({
						pageNum: pageNo,
						pageSize,
						commentType: 2,
						beUserType: 1,
						beUserId: this.shopDetails.id
					}).then(res => {
						if (res.code == 200) {
							this.appraiseData = res
							this.$refs.paging.complete(res.rows);
						} else {
							self.$utils.toast(res.msg);
						}
					})
				} else {
					getTutorListByMerchant({
						pageNum: pageNo,
						pageSize,
						merchantId: this.shopDetails.id
					}).then(res => {
						if (res.code == 200) {
							this.$refs.paging.complete(res.rows);
						} else {
							self.$utils.toast(res.msg);
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './shopControl.scss';

	.tutorList {
		padding-bottom: 200rpx;
	}

	.shopImg {
		padding-bottom: 160rpx;
	}
</style>